import React, { useState } from'react';
import Dance from '../../components/3Dmodel/dance' 
import Lazy from '../../components/3Dmodel/lazy' 
import Zuiz from '../../components/3Dmodel/zuizhong' 

import './index.scss'


const SelectComponent: React.FC = () => {
    const [selectedOption, setSelectedOption] = useState('option1');

    const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
        setSelectedOption(e.target.value);
    };

    return (
        <div className='selectOption'>

            
            <select value={selectedOption} onChange={handleChange}>
                <option value="option1">Dance</option>
                <option value="option2">Lazy</option>
                <option value="option3">Zuiz</option>
            </select>
            <div className='option-content'>
                {selectedOption === 'option1' && <p className='option1'><Dance/></p>}
                {selectedOption === 'option2' && <p className='option1'><Lazy/></p>}
                {selectedOption === 'option3' && <p className='option1'><Zuiz/></p>}
            </div>
        </div>
    );
};

export default SelectComponent;